<template>

  <div style="display: flex;flex-direction: column">
    <!--head-->
    <div style="height: 60px ; background-color:blue;width: 100vw;display: flex">
      <span style="font-size: 20px;color: white;height: 100%;display: flex;align-items: center;margin-left: 100px">欢迎使用后台管理系统</span>
      <div style="flex: 1"></div>
      <div style="height: 100%;display: flex;align-items: center;margin-right: 100px">
        <span style="font-size: 20px;color: white;margin-right: 20px">周润发</span>
        <img src="D:\Study\qianduan\src\assets\logo.svg" style="width: 40px;height: 40px;border-radius: 40px">
      </div>
    </div>
    <!--头部区域结束-->
    <!--内容区域-->
    <div style="width: 100vw;height: calc(100vh - 60px);display: flex">
      <!--左边布局-->
      <el-menu
          style="width: 200px;height: 100%"
          class="el-menu-vertical-demo"
          router
          :default-active="activeMenu"
      >
        <el-menu-item index="/manager"><el-icon><HomeFilled /></el-icon>系统首页</el-menu-item>
        <el-menu-item index="/manager/home"><el-icon><Management /></el-icon>信息管理</el-menu-item>
        <el-menu-item index="/manager/book"><el-icon><Notebook /></el-icon>图书管理</el-menu-item>
        <el-sub-menu>
          <template #title>
            <el-icon><location /></el-icon>
            <span>信息分类</span>
          </template>
          <el-menu-item index="/manager/book">学生列表</el-menu-item>
          <el-menu-item index="/manager/info">教师列表</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <!--右边内容区域-->
      <div style="background-color: #f5f5f5; height: 100%;flex: 1">
        <RouterView></RouterView>
      </div>
    </div>
  </div>

</template>

<script setup>

import {useRoute} from 'vue-router';
import {computed} from "vue";
import {Location} from "@element-plus/icons-vue";

const Route = useRoute()

const activeMenu=computed(()=>{
  return Route.path
})

</script>

<style scoped>

</style>